import React, { Component } from 'react';
import {
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
} from 'react-native';
import Carousel from 'react-native-looped-carousel';
import { Newpostop_Style as styles } from '../../../../styles'
import { common_url } from '../../../util/fetch';

const { width } = Dimensions.get('window');
const { height } = 45;

export default class CarouselExample extends Component {

    constructor(props) {
        super(props);

        this.state = {
            size: { width, height },
        };
    }

    _onLayoutDidChange = (e) => {
        const layout = e.nativeEvent.layout;
        this.setState({ size: { width: layout.width, height: 45 } });
    }

    render() {
        if (!this.props.postop_List.length > 0) {
            return (
                null
            )
        } else {
            return (
                <View onLayout={this._onLayoutDidChange} style={styles.top_all}>
                    <Carousel
                        delay={5000}
                        style={{ width: width * 1, height: 45 }}
                        autoplay>
                        {this.props.postop_List.map((item, index) => {
                            return (
                                <TouchableOpacity key={index} style={[styles.top_eve, this.state.size]}
                                    onPress={() => { this.goGet('Postionin', item.postionId) }}>
                                    <Image
                                        source={item.company.companyPicture ? { uri: common_url + "uploadImg/" + item.company.companyPicture } : require('../../../img/app/company.png')}
                                        //source={require('../../../img/app/baicaowei.jpg')}
                                        style={styles.top_img} />
                                    <Text style={[styles.top_com, { width: width * 0.4 }]}>{item.company.companyName}</Text>
                                    <Text style={[styles.top_pos, { width: width * 0.3 }]}>{item.postionName}</Text>
                                    <Text style={[styles.top_money]}>{item.postionSpace}</Text>
                                </TouchableOpacity>
                            )
                        })}
                    </Carousel>
                </View>
            );
        }
    }
    goGet(name, id) {
        this.props.navigation.navigate(name, { useId: id });
    }

}